<template>
  <view class="discount-setting">
    <u-sticky>
      <view class="header" id="header">
        <view class="header-search">
          <u-search placeholder="请输入场地名称" shape="round" :showAction="true"
                    v-model="params.storeName" @clickIcon="clickSearchIcon()" @custom="clickSearchIcon()"></u-search>
        </view>
      </view>
    </u-sticky>

    <view class="store-list">
      <view v-if="storeList.length > 0">
        <view class="store-list-item" v-for="(item, index) of storeList" :key="index" @click="editMeasuringUnit(item)">
          <view class="store-list-item-left">
            <u-avatar size="38" fontSize="21" randomBgColor :icon="`${staticFileUrl}/image/discount-setting/store-avatar.png`"></u-avatar>
            <text>{{item.storeName}}</text>
          </view>
          <view class="store-list-item-right">
            <text>{{item.measuringUnit}}</text><u-icon name="arrow-right"></u-icon>
          </view>
        </view>
        <u-loadmore :status="loadStatus" height="70rpx" line=true>
        </u-loadmore>
      </view>
      <view v-else>
        <u-empty mode="list" text="暂无场地" icon="http://cdn.uviewui.com/uview/empty/list.png"/>
      </view>
    </view>

    <u-popup :show="editMeasuringUnitShow" mode="center" round="20rpx" :safeAreaInsetBottom="false" :closeable="true"
    :customStyle="{width: '500rpx'}" @close="editMeasuringUnitShow=false">
      <view class="popup-content">
        <view class="title">编辑</view>
        <view class="demo">
          <text>示例：</text>
          <text>1{{formModel.measuringUnit}}/1元；</text>
          <text>1{{formModel.measuringUnit}}/1局</text>
        </view>
        <u--form
            labelPosition="left"
            :model="formModel"
            :rules="rules"
            ref="form1"
            :labelStyle="{fontSize:'26rpx', color: 'rgba(0, 0, 0, 0.7)', padding: '18rpx 0'}"
        >
          <u-form-item
              label="计量单位"
              prop="measuringUnit"
              labelWidth="100"
          >
            <u--input v-model="formModel.measuringUnit" border="bottom" fontSize="13" maxlength="5"
                      clearable placeholder="请输入计量单位" inputAlign="center"/>
          </u-form-item>
          <u-button type="primary" text="确认修改" :customStyle="btnCustomStyle" @click="confirmMeasuringUnit()"></u-button>
        </u--form>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      staticFileUrl: this.$configPath.staticFileUrl,
      storeList: [],		//场地集合
      params: {					//请求参数
        storeName: '',
        pageNum: 1,
        totalPage: 1,
      },
      loadStatus: 'nomore',		//列表底部加载更多状态
      editMeasuringUnitShow: false,

      formModel: {
        id: '',
        measuringUnit: '',
      },
      rules: {
        'measuringUnit': {
          type: 'string',
          required: true,
          message: '请输入计量单位',
          max: 5,
          min: 1,
          trigger: ['blur', 'change'],
        },
      },

      btnCustomStyle: {
        width: '376rpx',
        height: '88rpx',
        borderRadius: '120px',
        color: '#fff',
        marginTop: '30rpx',
      },

    };
  },
  onReady() {
    this.$refs.form1.setRules(this.rules)
  },
  //监听页面加载,登录后会调起
  onLoad(){
    this.params.storeName = '';
    this.load();
  },
  onUnload(){
	// this.findByStoreIdAndUserIdCommodity() 
	const url = 'pages-other/discount-setting/update-setting'
	let pages = getCurrentPages(); //获取所有页面栈实例列表
	let prevPage = pages[pages.length - 2]; //上一页页面实例
	  //console.log(prevPage.route,"prega")
	  if(prevPage.route === url){
		 prevPage.$vm.findDiscountPackageList();
	  }
  },
  onPullDownRefresh() {
    this.params.storeName = '';
    this.load();
  },
  methods: {

    confirmMeasuringUnit(){

      if (this.$u.test.isEmpty(this.formModel.id)){
        this.$helpers.toast('场地ID不能为空');
        return
      }

      if (this.$u.test.isEmpty(this.formModel.measuringUnit)){
        this.$helpers.toast('计量单位不能为空');
        return
      }

      const measuringUnit = this.$u.trim(this.formModel.measuringUnit, 'all')
      if (measuringUnit.length < 1 || measuringUnit.length > 5){
        this.$helpers.toast('计量单位请控制在1-5位');
        return
      }

      let param = {
        id: this.formModel.id,
        measuringUnit: measuringUnit,
      }

      uni.showLoading({
        title: '修改中...',
        mask: true
      })
      this.$api('merchantStore.updateMeasuringUnit', param).then(res => {
        uni.hideLoading();
        if (res.status == 0) {
          this.editMeasuringUnitShow = false;
          this.$helpers.toast("修改成功", 'success', 3000, true, () => {
            this.load();
          })
        }else{
          this.$helpers.toast('修改不成功，' + res.msg);
        }
      }).catch(err => {
        uni.hideLoading();
      })
    },

    editMeasuringUnit(data){
      this.formModel.id = data.id;
      this.formModel.measuringUnit = data.measuringUnit;
      this.$refs.form1.validateField('measuringUnit')
      this.editMeasuringUnitShow = true;
    },

    load() {
      this.storeList = [];
      this.params.pageNum = 1;
      this.params.totalPage = 1;
      this.findStoreList();
    },
    findStoreList() {
      uni.showLoading({
        title: '加载中...',
        mask: true
      })
      this.$api('merchantStore.findMerchantStoreList', this.params).then(res => {
        uni.stopPullDownRefresh();
        if (res.status == 0) {
          uni.hideLoading();
          this.params.pageNum = res.data.pageNum;
          this.params.totalPage = res.data.pages;
          this.loadStatus = res.data.pageNum === res.data.pages ? 'nomore' : 'loadmore';
          if (this.params.pageNum >= res.data.pages) {
            this.loadStatus = 'nomore';
          }
          this.storeList.push(...res.data.list)
        }else{
          uni.hideLoading();
          this.$helpers.toast('请求数据失败:' + res.data.msg);
        }
      }).catch(err => {
        uni.hideLoading();
        uni.stopPullDownRefresh();
      })
    },
    //点击搜索框图标
    clickSearchIcon() {
      // console.log("this.params.storeName：",this.params.storeName);
      this.load();
    },
    reachBottom() {
      if (this.params.pageNum >= this.params.totalPage) {
        return;
      };
      this.params.pageNum++;
      this.loadStatus = 'loading'
      this.findStoreList();
    },
  }
}
</script>

<style lang="scss" scoped>
.discount-setting{

  .header{
    background-color: $uni-bg-color;
    padding: 29rpx 24rpx;
  }

  .store-list{
    margin: 22rpx 24rpx 0 24rpx;

    .store-list-item{
      padding: 27rpx;
      background-color: $uni-bg-color;
      border-radius: 20rpx;
      margin-bottom: 20rpx;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      font-size: 26rpx;
      line-height: 40rpx;

      .store-list-item-left{
        display: flex;
        flex-direction: row;
        align-items: center;

        text{
          margin-left: 21rpx;
          color: rgba(0, 0, 0, 0.9);
        }
      }
      .store-list-item-right{
        display: flex;
        flex-direction: row;
        align-items: center;

        text{
          color: rgba(0, 0, 0, 0.7);
          margin-right: 14rpx;
        }
      }

    }
  }

  .popup-content{
    padding: 30rpx;

    .demo{
      font-size: $f-base;
      text-align: center;
    }

    .title{
      font-size: $f-base;
      margin-bottom: 50rpx;
      text-align: center;
    }
  }
}
</style>
